<template>
	<view class="JqList">
		<u-navbar :auto-back="true" :placeholder="true" title="全国景区" class="unavbar" bgColor="transparent"></u-navbar>
		<view class="bgTop"></view>
		<view class="list_box">
			<view >
				<u-search placeholder="搜索当地景区" :clearabled="true" 
					:showAction="false" 
					height="72rpx"
					bgColor="#ffffff"
					borderColor="#333333"
					v-model="search"
					@clickIcon="getSearch"
				></u-search>
			</view>
			<view class="list_top">
				<view class="flex_box item_center flex_between screen_box">
					<picker @change="selectGrade" :value="gradeIdx" :range="grade" range-key="title">
						<view class="flex_box item_center flex_center screen_item">
							<view>{{gradeIdx==""?"景区等级":grade[gradeIdx].title}}</view>
							<u-icon name="arrow-down-fill" width="12rpx" height="8rpx"></u-icon>
						</view>
					</picker>
					<view @click="regionV=true" class="flex_box item_center flex_center screen_item">
						<view>{{region.length==0?"选择城市":region[1]}}</view>
						<u-icon name="arrow-down-fill" width="12rpx" height="8rpx"></u-icon>
					</view>
					<picker @change="selectCard" :value="cardIdx" :range="cardList" range-key="title">
						<view class="flex_box item_center flex_center screen_item">
							<view>{{cardIdx==""?"景区卡种":cardList[cardIdx].title}}</view>
							<u-icon name="arrow-down-fill" width="12rpx" height="8rpx"></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<w-picker
				:visible.sync="regionV"
				mode="linkage"
				v-model="regionList"
				:options="areaList"
				:level="2"
				default-type="value"
				:default-props="regionProps"
				@confirm="regionGet($event,'linkage')"
				@cancel="regionCancel"
				ref="linkage" 
			></w-picker>
			<view class="list_body">
				<view class="list_main">
					<view v-if="item.id" @click="goUrl" :data-url="'/pages/listDetail/listDetail?id='+item.id" v-for="(item,index) in list" :key="index" class="flex_box item_center flex_between list_item">
						<u-image :src="item.image" width="200rpx" height="230rpx" radius="24rpx"></u-image>
						<view class="list_content">
							<view class="flex_box item_center flex_between list_t">
								<view class="list_name text_hidden">{{item.title}}</view>
							</view>
							<view class="flex_box flex_col_top">
								<view class="flex_shrink list_lable">{{item.c_name}}</view>
								<template v-for="(val, index) in item.cardtype">
									<view class="cardtype flex_box" :class="'cardtype' + val">
										<image src="/static/mine/icon1.png" class="typetagimg"></image>
										<view>{{ val == 1? '黄金版' : '豪华版' }}</view>
									</view>
								</template>
							</view>
							<view class="list_text text_more">{{item.content}}</view>
							<view class="flex_box item_center list_location flex_between flex_row_between">
								<view class="flex_box item_center" style="width:200rpx;">
									<image class="flex_shrink list_location_img" src="../../static/location.png"></image>
									<view class="list_location_text text_hidden">{{item.city}}·{{item.area}}</view>
								</view>
								<view class="price flex_box"><text>￥ {{item.price}}</text><view class="price_tag">门市价</view></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="list.length==0" class="noData">
					<image src="../../static/empty.png"></image>
					<view>暂无相关景区</view>
				</view>
				<view v-else>
					<view v-if="listStatus==0" class="flex_box item_center flex_row_center loading_box">上拉加载更多</view>
					<view v-else-if="listStatus==1" class="flex_box item_center flex_row_center loading_box">
						<image src="../../static/loading.gif"></image>
						<text>正在加载</text>
					</view>
					<view v-else class="flex_box item_center flex_row_center loading_box">没有更多了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {convertHtmlToText} from "@/common/js/public.js";
	import {
		getGrade,
		getJQList,
		getCitys
	} from '@/common/http.api.js';
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				list: [1],
				page: 1,
				listStatus: 1,
				search: "",
				characteristic: "",
				flag: "",
				category_id: "",
				province: "",
				city: "",
				grade: [],
				gradeIdx: "",
				cardIdx:'',
				region: [],
				regionV:false,
				regionProps:{
					label:"label",
					value:"value",
					children:"children"
				},
				regionList:[],
				areaList: {},
				lng: "",
				lat: "",
				cardList: [
					{id: 1, title: '黄金版'},
					{id: 2, title: '豪华版'},
				],
				cardtype: 0,
			}
		},
		onLoad(options) {
			let that = this
			if(options.characteristic) that.characteristic = options.characteristic
			if(options.flag) that.flag = options.flag
			if(options.province) that.province = options.province
			if(options.search) that.search = options.search
			that.getGrade();
			that.getAddress();
			that.getCitys();
		},
		onReachBottom() {
			let that = this
			that.listStatus==0&&(that.page = that.page + 1,that.listStatus = 1,that.getList())
		},
		methods: {
			getGrade(e){
				let that = this
				getGrade().then(res => {
					console.log(res)
					that.grade = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取位置
			getAddress: function() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(t) {
						console.log(t)
						that.lng = t.longitude, that.lat = t.latitude, that.getList()
					},
					fail() {
						uni.$u.Toast('获取位置信息失败，请开启GPS定位')
					}
				});
			},
			// 获取列表
			getList(e){
				let that = this
				let params = {params: {lng: that.lng,lat: that.lat,page: that.page,flag: that.flag,category_id: that.category_id,province: that.province,city: that.city,search: that.search,characteristic: that.characteristic, cardtype:that.cardtype}}
				getJQList(params).then(res => {
					let list = res.data
					list.forEach (v => {
						if (v.cardtype) {
							v.cardtype = v.cardtype.split(',')
						}
					})
					if(list.length<10){
						that.listStatus = 2
					}else{
						that.listStatus = 0
					}
					list.forEach((item,index)=>{
						item.content = convertHtmlToText(item.content)
						let num = item.content.length<50?item.content.length:50
						item.content = item.content.substring(0,num)
					})
					if(that.list[0]==1) that.list.splice(0,1)
					that.list = that.list.concat(list)
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取搜索
			getSearch(e){
				let that = this
				that.page = 1,that.listStatus = 1,that.list = [1],that.getList()
			},
			// 选择等级
			selectGrade(e){
				let that = this
				that.gradeIdx = e.detail.value,that.category_id = that.grade[e.detail.value].id,that.page = 1,that.listStatus = 1,that.list = [1],that.getList()
			},
			// 选择地区
			regionGet(res){
				let that = this
				that.region = res.result.split(","),that.province = res.value[0],that.city = res.value[1],that.page = 1,that.listStatus = 1,that.list = [1],that.getList()
			},
			// 选择卡种
			selectCard(e) {
				let that = this
				that.cardIdx  = e.detail.value;
				that.cardtype = that.cardList[e.detail.value].id;
				that.page = 1,that.listStatus = 1,that.list = [1],that.getList()
			},
			regionCancel(){
				
			},
			goUrl(e){
				let that = this,url = e.currentTarget.dataset.url
				uni.navigateTo({
					url: url
				})
			},
			getCitys() {
				let that = this;
				getCitys().then(res => {
					that.areaList = res.data;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/common/css/list.css");
</style>
